<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色常用值</title>
    <style>
<!--单词表示颜色-->
        h1{color: blue}
/* rgb表示*/
h1{
            color: rgb(255, 0, 0);
        }
/*十六进制*/
h1{
    color: #ba1e1e;
}
    /*rgba表示*/
h1{
    color: rgba(255, 0, 0, 0.2
    );

}
    /*1.背景图：线型渐变*/
   .d1{
       width: 500px;
       height: 30px;
       /*渐变色*/
       background: linear-gradient(50deg,greenyellow,red,blue);
   }
    /*2.背景图片*/
   .d2{
       width: 500px;
       height: 300px;
       /*设置背景图*/
       background-image: url("../day01/img/zly.jpg");
       /*设置背景图大小*/
       background-size: 50px 100px;
   /*    设置背景色*/
       background-color: black;
   }
   /*背景图片*/
   .d3{
       width: 500px;
       height: 300px;
       /*为当前的div块元素添加5px 红色实线的边框，方便测试*/
       border: 5px solid red;
       background-image: url("../day01/img/zly.jpg ");
       background-size: 150px 300px;
       background-color: black;
       /*重复排列*/
       background-repeat: repeat-x;
       background-repeat: no-repeat;
       /*移动方向：右下为正，左上为负*/
       background-position: right top;
       background-position: 50px 50px ;
       /*两个可以简化为一个*/
       background-position:  center;
       /*水平和垂直都居中*/
       background-position: 50% 50%;
   }
    </style>
</head>
<body>
<h1>I LOVE YOU</h1>
<!--d*3 Tab键-->
<div class="d1">泥嚎我是大马虎</div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>